<template>
  <div class="list-page">
    <div class="list-page-main">
      <div class="pb20 flex flex-between">
        <div>
          <NButton type="primary" @click="handAdd()">
            <i class="esayIcon esayIcon-tianjiawenjianjia"></i>
            <span class="pl8">添加</span>
          </NButton>
        </div>
      </div>
      <NDataTable
        v-model:checked-row-keys="tableInfo.checkedRowKeys"
        style="flex: 1"
        flex-height
        :columns="columns"
        :loading="tableInfo.listLoading"
        :data="tableInfo.tableData"
      />
      <div class="pagination mt20">
        <NPagination
          v-model:page="tableInfo.queryForm.pageNo"
          :page-count="tableInfo.total"
          :page-sizes="tableInfo.pageSizes"
          show-quick-jumper
          show-size-picker
          @updatePage="pageChange"
          @updatePageSize="sizeChange"
        />
      </div>
    </div>
    <DelConfirm ref="delRef" @confirm="delConfirm" />
  </div>
</template>

<script setup lang="ts">
import { h, ref } from 'vue'
import { NButton, NDataTable, NImage, NPagination, NTag } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import audioList from '@/service/api/file/list'
import { useApi } from '@/hooks/useApi'
import DelConfirm from '@/components/nComponents/DelConfirm'

const addRef = ref()
const delRef = ref()
const { handAdd, tableInfo, handDel, delConfirm, pageChange, sizeChange } =
  useApi({
    addRef,
    delRef,
    getData: async (params: any) => {
      const res = await audioList.list(params)
      res.data.data.map((el: any) => {
        el.key = el.id
        return el
      })
      return res
    },
    delData: audioList.dels,
    initForm: {
      name: ''
    }
  })
const getAppend = (delPath: string) => {
  const arr = delPath.split('.')
  return arr[arr.length - 1]
}
/**
 *  获取列表
 * */
const columns: DataTableColumns<any> = [
  {
    type: 'selection',
    options: ['all', 'none'],
    disabled(row) {
      return row.name === 'Edward King 3'
    }
  },
  {
    title: '文件',
    key: 'temporary_path',
    align: 'center',
    render(row: any) {
      if (['apk'].includes(getAppend(row.delPath))) {
        return h(
          NTag,
          {
            type: 'primary'
          },
          { default: () => 'apk' }
        )
      } else {
        return h(NImage, {
          src: row.temporary_path,
          width: '70'
        })
      }
    }
  },
  {
    title: '大小',
    key: 'fileSize'
  },
  {
    title: '关联',
    key: 'about_type',
    align: 'center',
    render(row: any) {
      return h(
        NTag,
        {
          type: row.about_type === '未使用' ? 'error' : 'primary'
        },
        { default: () => row.about_type }
      )
    }
  },
  {
    title: '关联ID',
    key: 'about_id'
  },
  {
    title: '操作',
    key: 'total',
    align: 'center',
    width: 300,
    render(row: any) {
      return h('div', [
        h(
          NButton,
          {
            size: 'small',
            class: 'ml10',
            type: 'error',
            onClick: () => handDel(row)
          },
          { default: () => '删除' }
        )
      ])
    }
  }
]
</script>

<style lang="scss" scoped></style>
